    <template>
        <div class="cmt-container">
            <h3>发表评论</h3>
            <hr>
            <textarea placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120">

            </textarea>
            <mt-button type="primary" size="large">发表评论</mt-button>
            <div class="cmt-list">
                <div class="cmt-item" v-for="(item,i) in comments" :key="user_id">
                    <div class="cmt-title">
                       第{{ i+1 }}楼&nbsp;&nbsp;用户：{{ item.user_name }}&nbsp;&nbsp;发表时间：{{ item.add_time }}
                    </div>
                    <div class="cmt-body">
                        {{ item.content === 'undefined' ? '此用户很懒，嘛都没说': item.content }}
                    </div>
                </div>
            </div>
            <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
        </div>
    </template>

    <script>
        import { Toast } from 'mint-ui'
        export default {
            data (){
                return {
                    pageIndex:1,
                    comments:[]
                }
            },
            created(){
                this.getComments()
            },
            methods :{
                getComments(){
                    this.$http.get("../../../static/getcomments.json?this.id&pagendex="+this.pageIndex).then(result => {
                        console.log(result.body)
                        if(result.body.status === 0){
                            //this.comments = result.body.message;
                            this.comments = this.comments.concat(result.body.message);
                            Toast("评论发布成功");
                        }else {
                            Toast("评论发布失败");
                        }

                    })
                },
                getMore() {
                  // 加载更多
                  this.pageIndex++;
                  this.getComments();
                }
            },
            props: ["id"]
        }
    </script>

    <style lang="scss" scoped>
        .cmt-container{
            padding:3px;
            h3 {
                font-size:18px;
            }
            textarea {
                font-size:14px;
                marginm-bottom:0;
                height: 85px;
            }
            .cmt-list {
                margin:5px 0;
                .cmt-item {
                    font-size:13px;
                   .cmt-title {
                    background-color: #ccc;
                    line-height:30px;
                   }
                   .cmt-body {
                        text-indent:2em;
                        line-height:35px;
                   }
                }
            }

        }
    </style>